<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-24 11:42:22
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiInput\uiInput.vue
 * CIMC-V2
-->
<template>
  <div>
    <UiFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
      <div class="w-full">
        <el-input :ref="info._id" v-model="formDataModel" disabled />
      </div>
    </UiFormItem>
    <VuiModal v-if="showModal" v-model="showModal">
      <template #title>{{ translateTitle('Ve.elements.提示') }}</template>
      <div class="special-situation-detail-content-mark"></div>
    </VuiModal>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import { webapp_ws_fun_mark } from '@ve/utils/print/grwebapp'
  export default defineComponent({
    name: 'UiPrintMark',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        showModal: false,
        macUrl: '',
      }
    },
    computed: {
      getPrintMessage() {
        return this.$store.getters['diyPrint/getMessage']
      },
    },
    watch: {
      formDataModel: {
        deep: true,
        handler(newval) {
          console.log('newval', newval)
          if (!newval && newval !== 0) {
            if (this.macUrl) {
              this.formDataModel = this.macUrl
            }
          } else {
            this.formDataModel = String(newval)
          }
        },
      },
    },
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      translateTitle,
      init() {
        if (!this.hasPreview) {
          console.log('预览模式不运行 打印机')
          return
        }
        webapp_ws_fun_mark((value, newNode) => {
          console.log('创建打印机连接', value, newNode)
          if (value === false) {
            this.showModal = true
            this.$nextTick(() => {
              console.log(document.querySelector('.special-situation-detail-content-mark'))
              if (document.querySelector('.special-situation-detail-content-mark')?.childNodes.length > 0) return
              document.querySelector('.special-situation-detail-content-mark')?.appendChild(newNode)
            })
          }
        })
        // 新的
        if (window.webapp_onmessage) {
          window.webapp_onmessage = (event) => {
            let message = JSON.parse(event.data)
            console.log('UiPrintMark', message)
            if (message.type == 'fun') {
              // 获取当前电脑客户端的mark地址
              switch (message.fun) {
                case 'mac':
                  this.macUrl = message.result
                  break
              }
            }
          }
        }
      },
    },
  })
</script>
<style scoped>
  :deep() .hasPrefix .el-input__inner {
    padding-left: 25px;
  }
  :deep(.hasTextColor) .el-textarea__inner,
  :deep(.hasTextColor) .el-input__inner {
    color: v-bind(textColor);
  }
  :deep() .el-input.is-disabled .el-input__inner,
  :deep() .el-input__inner {
    background-color: v-bind(bgColor);
  }
  :deep() input.el-input__inner:-moz-placeholder {
    color: v-bind(placeholderColor);
  }

  :deep() input.el-input__inner::-moz-placeholder {
    color: v-bind(placeholderColor);
  }

  :deep() input.el-input__inner:-ms-input-placeholder {
    color: v-bind(placeholderColor);
  }
  #preset {
    margin: 2px;
    padding: 5px;
    display: inline-block;
    width: 100%;
    text-align: end;
  }

  :deep() input.el-input__inner::-webkit-input-placeholder {
    color: v-bind(placeholderColor);
  }
</style>
